<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div style="position:relative;z-index:2000;width: 100vw;height:auto;background: #f5f5f5;">
    <div class="headers">
      <div class="content">
        <button>{{data.status}}</button>
        <div class="time" style="width: auto;">{{data.operation_time}}</div>
        <p class="decoration">{{data.shipping_tip}} </p>
        <p style="width: 100vw;height: 1px;border-bottom: 1px solid #f5f5f5;margin-left: -4vw;margin-top: 3.3vw;margin-bottom: 3.3vw"></p>
        <div class="infomation">
          <img src="../assets/img/addressRed.png" alt="">
          <span class="person" style="margin-left:3vw;float: left;">收货人：{{data.accept_name}}</span>
          <span class="tel" style="float: right;">{{data.mobile}}</span>
        </div>
        <div class="clear"></div>
        <p class="address">收货地址：{{data.address_info}}</p>
      </div>
    </div>
    <div class="goods">
      <div class="contents" v-for="(v,i) in data.goods" :key="i">

          <div class="sec">
            <router-link :to="'/detail?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+v.goods_id">
              <img :src="v.img" alt="">
              <div class="text">
                <p class="name">
                  <span class="goodsName">{{v.goods_name}}</span>
                  <span class="types">￥{{v.real_price}}</span>
                </p>
                <p class="size" style="magrin-top:1vw;">
                  <span>规格:{{v.spec_array}}</span><span style="margin-left: 2vw"></span><span class="types" style="margin-right: -13vw">×{{v.goods_nums}}</span>
                </p>
              </div>
            </router-link>
            <div style="width: 100vw;height: 13.33vw;">
              <div class="btn">
                <div class="seven" v-if="v.is_seven_return == 0">七天无理由退换货</div>
                <button class="nOrder" @click="afterSale" v-if="v.is_return == 1">申请售后</button>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="price">
      <div class="out">
        <p>应付金额 <span>￥{{data.payed_amount}}</span></p>
        <div class="line"></div>
        <p>商品总价 <span style="font-size: 15px;color: #ff4c50;">￥{{data.goods_total}}</span></p>
        <div class="line"></div>
        <p>商品优惠 <span>-￥{{data.vip_discount_price}}</span></p>
        <div class="line"></div>
        <p>运费 <span>￥{{data.shipping_fee}}</span></p>
      </div>
    </div>
    <div class="orderMes">
      <div class="out">
        <p>订单编号：{{code}} <button type="button" @click="doCopy">复制</button></p>
        <p>交易单号：{{alipay}}<button type="button" @click="aliCopy">复制</button></p>
        <p>下单时间：{{data.order_time}}</p>
        <p v-if="data.pay_time">付款时间：{{data.pay_time}}</p>
        <p v-if="data.send_time">发货时间：{{data.send_time}}</p>
      </div>
    </div>
    <!-- <footer align="center">
      <button v-if="data.operate.is_comment ==1" @click="afterSale">评价</button>
      <button v-if="data.operate.is_confirm ==1" @click="afterSale">确认收货</button>
      <button v-if="data.operate.is_deliver ==1" @click="afterSale">查看物流</button>
      <button v-if="data.operate.is_cancel ==1" @click="afterSale">取消订单</button>
      <button v-if="data.operate.is_delete ==1" @click="afterSale">删除订单</button> -->
      <!--<button v-if="data.operate.is_to_pay ==1" style="color: #ff4c50;border:1px solid #ff4c50;" @click="gotoPay">支付</button>-->
      <!-- <button v-if="data.operate.is_to_pay ==1" style="color: #ff4c50;border:1px solid #ff4c50;" @click="afterSale">支付</button>
    </footer> -->
    <div style="width: 80vw;">
      <van-popup v-model="alertshow" position="bottom" show-cancel-button
                 style="position:fixed;top: 35vw;height: 52vh;overflow: hidden;border-radius: 2vw;width: 80vw;">
        <alertPay :actual="this.data.payed_amount" :data="dataList" @close="close" :order_sn="this.data.order_no" @isPay="isPay" v-if="!alertshows"></alertPay>
        <div v-else>
          <div style="text-align:center;padding-top: 50px" v-if="ispay">
            <img src="../assets/img/mall_pay_suc@2x.png" alt="" style="width: 200px">
            <p style="font-size: 16px;margin-top: 20px">支付成功</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="toOrder">确定</button>
          </div>
          <div style="text-align:center;padding-top: 50px" v-else>
            <img src="../assets/img/mall_pay_failure@2x.png" alt="" style="width: 200px">
            <p style="font-size: 16px;margin-top: 20px">支付失败</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="close">确定</button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import request from '../request/index'
  import { Dialog } from 'vant';
  import { Toast } from 'vant';
  import alertPay from '../components/vant/alertPay'
  export default {
    name: "orderDetail",
    components:{
      alertPay
    },
    data(){
      return{
        alertshow:false,
        alertshows:false,
        code:'',
        alipay:this.$route.query.orderNum,
        show:false,
        data:[],
        dataList:[],
      }
    },
    created(){
      request.orderDetail(this, this.alipay);
    },
    methods:{
      testLayerToast(content){
        this.$layer.toast({
          content: content,
          time: 1500
        })
      },
    },
    methods:{
      gotoPay(){
        /*request.getListPay(this,v.order_no);*/
        this.alertshow =!this.alertshow;
        if(this.isGetMethod){
          request.getPayMethod(this);
        }
        this.order_no = this.data.order_no;
        this.payable_total = this.data.payable_total;
      },
      isPay(res){
        // this.show=!this.show;
        this.alertshows=true;
        this.ispay=res;
      },
      close(){
        this.alertshow = !this.alertshow;
      },
      afterSale:function(){
        Dialog.confirm({
          message: '是否前往app操作'
        }).then(() => {
          window.location.href="http://www.napin.com/download.html"
        }).catch(() => {
          // on cancel
        });
      },
      doCopy: function () {
        this.$copyText(this.code).then(function (e){
          Toast({
            message:'复制成功'
          });
        }, function (e) {
          alert('Can not copy')
        })
      },
      aliCopy: function () {
        this.$copyText(this.alipay).then(function (e) {
          Toast('复制成功');
        }, function (e) {
          alert('Can not copy')
        })
      },
    },
    mounted(){
        document.title="订单详情";
    }
  }
</script>

<style scoped lang="scss">
  footer{
    width: 100vw;
    height: 13.33vw;
    background: #fff;
    margin-top: 4vw;
    padding-top: 3.3vw;
    button{
      width: 16vw;
      height: 8vw;
      font-size: 12px;
      color: #666;
      line-height: 8vw;
      text-align: center;
      border:1px solid #666 ;
      border-radius: 4vw;
      background: none;
      margin: 0 1vw 0 1vw;
      float: right;
    }
  }
  .orderMes{
    width: 100vw;
    height: auto;
    background: #fff;
    margin-top: 4vw;
      .out{
        width: 92vw;
        height: 100%;
        margin:0px auto;
        p{
          width: 100%;
          height: 8vw;
          line-height: 8vw;
          color: #666;
          font-size: 12px;
          button{
            width:13.33vw;
            height: 4.67vw;
            float: right;
            background: none;
            border: 1px solid #333;
            color: #333;
            border-radius: 1.5vw;
            line-height: 4.67vw;
            text-align: center;
            margin-top: 1.17vw;
          }
        }
      }
  }
  .price{
    width: 100vw;
    height: auto;
    background: #fff;
    .out{
      width: 92vw;
      height: 100%;
      margin:0px auto;
      .line{
        width: 100vw;
        height: 1px;
        border-bottom: 1px solid #f5f5f5;
        margin-left: -4vw;
      }
      p{
        width: 100%;
        height: 12vw;
        line-height: 12vw;
        font-size: 13px;
        color: #333;
        span{
          float: right;
        }
      }
    }
  }
  .goods{
    margin-top: 4vw;
    .contents{
      width: 100vw;
      height: auto;
      background: #fff;
      padding-top: 4vw;
      border-bottom: 4vw solid #f5f5f5;
      .btn{
        float: right;
        margin-top: 5vw;
        .seven{
          font-size: 11px;
          display: inline-block;
          width: 32vw;
          text-align: center;
          height: 4.34vw;
          line-height: 4.34vw;
          margin-right: 4vw;
          color: #ff4c50;
          border-radius: 4vw;
          border: 1px solid #ff4c50;
        }
        .popup{
          width: 70vw;
          height: 30vw;
          -webkit-border-radius: 1vw;
          -moz-border-radius: 1vw;
          border-radius: 1vw;
            div{
              margin: 3vw;
              button{
                border: 1px solid #f5f5f5;
                margin-right: 1vw;
                margin-top: 10vw;
                background: #f5f5f5;
                color: #333;
                border-radius: 3px;
              }
              .no{
                float: right;
                margin-right: 10%;
              }
              .yes{
                float: left;
                margin-left: 10%;
              }
            }
        }
        .nOrder{
          border: 1px solid #666;
          color: #666;
        }
        .pay{
          border: 1px solid #ff4c50;
          color: #ff4c50;
        }
        button{
          width:18.67vw;
          height: 8vw;
          line-height: 8vw;
          text-align: center;
          background: #fff;
          border-radius: 4vw;
          margin-right: 4vw;
        }
      }
      .sec{
        width: 100vw;
        height:30vw;
        line-height:6.67vw;
        .text{
          float: right;
          padding-top: 3vw;
          width: 73vw;
          p{
            height: 5vw;
            .types{
              float: right;
              color: #FF4C50;
              font-size: 13px;
              margin-right: 4vw;
            }
          }
          .size{
            font-size: 12px;
            color: #666;
          }
          .name{
            font-size: 13px;
            color: #333;

            .goodsName{
              width: 41vw;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              display: inline-block;
            }
          }
        }
        img{
          width: 20vw;
          height: 20vw;
          float: left;
          margin-left: 4vw;
          margin-top: 2.67vw;
          border-radius: 3px;
        }
      }

    }
  }
  .headers{
  width: 100vw;
  height:auto;
  padding-bottom: 3vw;
  background: #fff;
    .content{
      width: 92vw;
      height: 100%;
      margin: 0px auto;
      padding-top: 5.33vw;
      overflow: hidden;
        .address{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(102,102,102,1);
          margin-top: 5.3vw;
        }
      .infomation{
        span{
          font-size: 15px;
          color: #333;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          line-height: 5.3vw;
        }
        img{
          width: 5vw;
          height: 5.3vw;
          float: left;
        }
      }
      .decoration{
        width: 92vw;
        height:auto;
        font-size:15px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        margin-top: 4vw;
      }
        .time{
          width:26.67vw;
          height:4.3vw;
          background:rgba(245,245,245,1);
          border-radius:4vw;
          float: right;
          margin-top: 2.3vw;
          color: #333;
          font-size: 11px;
          text-align: center;
          line-height: 4.3vw;
        }
        button{
          width:21.33vw;
          height:8vw;
          background:rgba(255,76,80,1);
          box-shadow:0px 6px 10px 0px rgba(118,118,118,0.3);
          border-radius:6px;
          color: #fff;
        }
    }

}
</style>
<style scoped>
  .van-toast--text{
    z-index: 999999 !important;
  }
</style>
